
<template>
    <div class="sjzxm-pmo-page">

        <van-popup v-model="isShow" position="bottom" :style="{ height: '100%', width: '100%' }">

            <div class="titlebar bg-theme color-f text-l">
                <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
                <!-- 详情进入 -->
                <span class="font19 ml16 ">{{ pageTitle }} </span>
            </div>

            <van-form @submit="sureButtonClick" @failed="failedMethod">
                <van-cell-group>
                    <van-field :readonly="false" required name="memberRole" v-model="mFromdata.memberRole" label="成员角色："
                        label-width="5em" />
                    <van-field :readonly="false" required name="memberTreuname" v-model="mFromdata.memberTreuname"
                        label="成员姓名：" label-width="5em" />
                    <van-field :readonly="false" required name="memberUsername" v-model="mFromdata.memberUsername"
                        label="成员OA账户：" label-width="7em" />
                    <van-field :readonly="false" required name="memberPosition" v-model="mFromdata.memberPosition"
                        label="成员职位：" label-width="5em" />
                    <van-field :readonly="false" required name="memberDepartment" v-model="mFromdata.memberDepartment"
                        label="成员部门：" label-width="5em" />
                    <van-field :readonly="false" required name="memberPhone" v-model="mFromdata.memberPhone"
                        label="联系方式：" label-width="5em" />
                    <van-field readonly required right-icon="arrow" name="joinDate" :value="mFromdata.joinDate" label="加入日期："
                        label-width="5em" @click="showPopupView = true" />
                    <van-popup v-model="showPopupView" position="bottom" get-container="body">
                        <van-datetime-picker v-model="currentDate" :formatter="formatter" type="date"
                            @confirm="joinDateOnComfirm" @cancel="showPopupView = false" />
                    </van-popup>
                </van-cell-group>

                <!-- 流转下一步 -->
                <div class="footer">
                    <van-button block type="info" native-type="submit"
                        style="display: inline-block; width: 100%; border: 0px solid #60a9ec">确定</van-button>
                </div>
            </van-form>


        </van-popup>
    </div>
</template>

<script>

import jTool from "@/assets/js/jHelper";
import util from '@/assets/js/public';
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment';


export default {
    props: {
        pageTitle: {
            type: String,
            default: '添加PMO成员',
        },

        withoutData: {
            type: Object,
            default: () => { }
        },

       

    },
    data() {
        return {
            isShow: true,

            mFromdata:{},

            currentDate: new Date(),
            showPopupView: false,
        }
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),



    },

    created() {

        
    },


    watch: {

        withoutData: {

            handler(newValue, oldValue) {
                this.mFromdata = newValue;
            },

            // deep: true,  // 可以深度检测到 obj 对象的属性值的变化
            immediate: true //刷新加载  立马触发一次handler
        },

    },


    methods: {

        goBack() {

            this.isShow = false;
            this.$emit('update-flag', false)
        },

        onItemSelected() {

            this.isShow = false;
            this.$emit('select-item', this.mFromdata)
        },
        failedMethod(data) {

            console.log('submit fail:', data);
            const errorArr = data.errors;
            const errorObj = errorArr[0];
            const errorMessage = errorObj.message;
            Toast({ type: 'text', message: errorMessage, duration: 1000 });
        },


        /// 年月日 时间格式
        formatter(type, val) {

            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            } else if (type === 'hour') {
                return `${val}时`;
            } else if (type === 'minute') {
                return `${val}分`;
            }
            return val;
        },


        // 合作伙伴 - 合作伙伴甄选时间
        joinDateOnComfirm(value) {

            this.showPopupView = false;

            let joinDate = moment(value).format('YYYY-MM-DD');
            this.currentDate = joinDate;
            this.mFromdata.joinDate = joinDate;
        },

        sureButtonClick() {

            this.onItemSelected();
        },


    }
}
</script>

<style scoped>
.titlebar {
    width: 100%;
    height: 50px;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    display: flex;
    align-items: center;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>